<!-- 科研管理-样品管理--样品资料 -->
<!-- 参考网站 http://shkejianjc.com/?list_96/514.html -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-left">
      <div class="JNPF-common-title">
        <h2>样品分类</h2>
        <span class="options">
          <el-tooltip content="样品分类" placement="top">
            <el-link icon="el-icon-menu" :underline="false"/>
          </el-tooltip>
        </span>
      </div>
      <el-scrollbar class="JNPF-common-el-tree-scrollbar">
        <el-tree :props="defaultProps"
              accordion :data="treeData"  node-key="id"
          class="JNPF-common-el-tree">
          <span class="custom-tree-node" slot-scope="{ data }">
            <i :class="data.icon" />
            <span class="text">{{data.label}}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="8">
            <el-form-item label="样品名称">
              <el-input v-model.trim="listQuery.fsamplename" clearable class="filter-item" placeholder="请输入编号或名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="">
              <el-button type="primary" icon="el-icon-search">查询</el-button>
              <el-button type="success" icon="el-icon-plus" @click="insert(undefined)">新增</el-button>
              <el-button type="warning" icon="el-icon-upload2">导入</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <JNPF-table :data="list" border v-loading="loading">
          <el-table-column align="left" label="样品分类" prop="FCATTYPE" />
          <el-table-column align="left" label="样品编号" prop="FCATNO" />
          <el-table-column align="left" label="样品名称" width="200px" prop="FCATNAME" />
          <el-table-column align="left" label="规格" prop="FSPEC" />
          <el-table-column align="left" label="单位" prop="FUNIT" />
          <el-table-column fixed="left" align="left" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button @click.native.prevent="insert(scope.row.FCATNO)" icon="el-icon-edit" type="text" size="small">
              编辑
            </el-button>
            <!-- <el-button @click="labelTag(scope.row)" icon="el-icon-edit" type="text" size="small">
              标签
            </el-button>
            <el-popconfirm title="确定删除当前数据吗？" @confirm="Catdelete(scope.row.FCATNO)">
              <el-button slot="reference" icon="el-icon-delete" style="color: red;margin-left: 10px;"
                type="text">删除</el-button>
            </el-popconfirm> -->
          </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
        <Form ref="Form" :parelist="list" />
        <Tabs ref="Tabs" :catlist="catlist" />
      </div>
    </div>
  </div>
</template>

<script>
  import Form from "./Form.vue"
  import Tabs from "./Tabs"
  export default {
    name: 'shop',
    components: { Form, Tabs },
    data() {
      return {
        fsiteNoBelongOptions: [],
        catlist: [],
        total: 0,
        list: [],
        defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [{
          label: "化工产品",
          children: [{
            label: "化学助剂",
            children: [{
              label: "造纸助剂检测"
            },{
              label: "饲料添加剂检测"
            },{
              label: "水处理剂检测"
            }]
          },{
            label: "农药",
            children: [{
              label: "兽药检测"
            },{
              label: "杀虫剂检测"
            },{
              label: "除草剂检测"
            }]
          }]
        }, {
          label:  "食品/农产品",
          children: [{
            label:"乳制品",
            children: [{
              label:"炼乳检测"
            },{
              label:"牛奶检测"
            }]
          },{
            label:"饮料酒水",
            children: [{
              label:"白酒检测"
            },{
              label:"啤酒检测"
            }]
          }]
        }],

        list: [
        {
          "FCATTYPE": "饲料添加剂检测",
          "FCATNO": "100001",
          "FCATNAME": "实验猪配合饲料",
          "FUNIT": "g",
          "FSPEC":"500g",
          "FVISIBLE": 1,
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        },{
          "FCATTYPE": "饲料添加剂检测",
          "FCATNO": "100002",
          "FCATNAME": "实验鸡配合饲料",
          "FUNIT": "g",
          "FSPEC":"350g",
          "FVISIBLE": 1,
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        },{
          "FCATTYPE": "饲料添加剂检测",
          "FCATNO": "100003",
          "FCATNAME": "兔生长繁殖饲料",
          "FUNIT": "g",
          "FSPEC":"200g",
          "FVISIBLE": 1,
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        },{
          "FCATTYPE": "牛奶检测",
          "FCATNO": "200001",
          "FCATNAME": "液体乳（灭菌乳）",
          "FUNIT": "g",
          "FSPEC":"100g",
          "FVISIBLE": 1,
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        },{
          "FCATTYPE": "牛奶检测",
          "FCATNO": "200002",
          "FCATNAME": "液体乳（巴氏杀菌乳）",
          "FUNIT": "g",
          "FSPEC":"90g",
          "FVISIBLE": 1,
          "FIMAGE": null,
          "FOPERATOR": "system",
          "FUPDDATE": "2011-02-16T02:57:02.000+00:00"
        }
        ],

        loading: false,
        listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fsiteNo: undefined,
          fsupno: undefined,
          fsampleno: undefined
        },
      };
    },
    computed: {},
    created() {
    },
    methods: {
      insert(row) {
        this.$refs.Form.init(row);
      },
      //标签
      labelTag(row) {
        this.$refs.Tabs.opentabs(row);
      },
    },
  };
</script>